各类定位演示

各类定位演示

1. 基本情况

基准元素b1
目标元素a1
var Position = FNX.include('position/position');

Position.pin('#a1', {element: '#b1', x: '50px', y: '50px'});

2. 目标元素的offsetParent不为body

目标元素a2
基准元素b2
var Position = FNX.include('position/position');

Position.pin('#a2', {element: '#b2', x: 50, y: 50});

3. 目标元素带偏移量

基准元素b3
目标元素a3
var Position = FNX.include('position/position');

Position.pin({element: '#a3', x: -50, y: -50}, {element: '#b3'});

4. 偏移量为left|center|top|%的情况

基准元素b4
目标元素a4
var Position = FNX.include('position/position');

Position.pin({element: '#a4', x: 'center', y: '50%'}, {element: '#b4', x: '100%', y: '50%'});

5. 定位到元素中央

基准元素b5
目标元素a5
var Position = FNX.include('position/position');

Position.center('#a5', '#b5');

6. 相对可见区域定位

目标元素a6
var Position = FNX.include('position/position');

Position.pin('#a6', {x: 50,y: 50});

document.getElementById('J_rePosition6').onclick = function() {
    Position.pin('#a6', {x: 50,y: 50});
};

7. 定位到屏幕中央

目标元素a7
var Position = FNX.include('position/position');

Position.center('#a7');

document.getElementById('J_rePosition7').onclick = function() {
    Position.center('#a7');
};

8. 处理类似于100%+20px这样的定位

目标元素a8
基准元素b8
var Position = FNX.include('position/position');

Position.pin('#a8', {element: '#b8', x: '100%+50px', y: '50%-50'});

9. 定位fixed元素

目标元素a9
var Position = FNX.include('position/position');

Position.pin('#a9', { x: 400, y: 10 });